import { memo, useState } from "react";
import { Button, Input, message } from "antd";
import StudentSHeaderstyle from "./style";

const StudentHeader = memo(
  (props: {
    changeSearchName: (value: string) => void;
    resetClick: () => void;
  }) => {
    const { changeSearchName, resetClick } = props;
    const [value, setValue] = useState("");

    const handelSeacrhClick = () => {
      if (value === "") {
        void message.error("去输入查询值！");
        return;
      }
      changeSearchName(value);
    };
    const handelResetClick = () => {
      setValue("");
      resetClick();
    };
    return (
      <StudentSHeaderstyle>
        <div className="search">
          <div className="input">
            <span className="inputTitle">查询学员：</span>
            <Input
              allowClear
              value={value}
              onChange={(e) => setValue(e.target.value)}
            />
          </div>
          <div className="btn">
            <Button type={"primary"} onClick={handelResetClick}>
              重置
            </Button>
            <Button type={"primary"} onClick={handelSeacrhClick}>
              查询
            </Button>
          </div>
        </div>
      </StudentSHeaderstyle>
    );
  }
);

export default StudentHeader;
